<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="js/themes/sunny/jquery.ui.all.css">
<script src="js/jquery-1.5.1.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.slider.js"></script>


<script type="text/javascript">
$(document).ready(function() {
	
	$("#test_div_click").click(function(){
		alert("test_div_click");
		$(this).html("test");
	});
	

	var LC_Home_URL = 'http://www.theqi.com/buddhism/GL1/audio/';
	var Audio = $("#Audio").get(0);
	
	$("#AudioPlayer_play").click(function(){
		$(Audio).unbind('timeupdate.setend');
		Audio.play();
		$(Audio).bind('timeupdate',function(){
			$("#AudioPlayer_time").html($(this)[0].currentTime.toFixed(2));
		});
	});
	
	
	$("#AudioPlayer_pause").click(function(){
		Audio.pause();
	});
	
	
	$("#AudioPlayer_LCSelector_select").click(function(){
		var temp_audio_src = LC_Home_URL+$("#AudioPlayer_LCSelector_input").get(0).value+".MP3";
		$(Audio).html('<source src="'+temp_audio_src+'" >');
		$("#AudioPlayer_LCSelector_selectURL").html("Audio Source URL: "+temp_audio_src);
		
		//alert(LC_Home_URL+$("#AudioPlayer_LCSelector_input").get(0).value+".MP3");
		
	});
	
	
	////////////////////////////////////////////////////////////////////////////////////
	
	var Time_Section = {start:0, end:0};
	
	$("#StartTimeSelector_StartTime_p_n").get(0).value=0.5;
	$("#StartTimeSelector_StartTime_m_n").get(0).value=0.5;
	$("#EndTimeSelector_EndTime_p_n").get(0).value=0.5;
	$("#EndTimeSelector_EndTime_m_n").get(0).value=0.5;
	$("#StartTimeSelector_TestPlay_End").get(0).value =5;
	$("#EndTimeSelector_TestPlay_End").get(0).value =5;
	
	//////////////////// Start Time ////////////////////
	
	$("#StartTimeSelector_Select").click(function(){
		Time_Section.start = Audio.currentTime;
		$("#StartTimeSelector_StartTime").html(Time_Section.start);
	});
	
	$("#StartTimeSelector_StartTime_p").click(function(){
		var add_n = $(this).find("#StartTimeSelector_StartTime_p_n").get(0).value;
		Time_Section.start +=parseFloat(add_n);
		$("#StartTimeSelector_StartTime").html(Time_Section.start);
	});
	
	$("#StartTimeSelector_StartTime_m").click(function(){
		var minus_n = $(this).find("#StartTimeSelector_StartTime_m_n").get(0).value;
		Time_Section.start -=parseFloat(minus_n);
		$("#StartTimeSelector_StartTime").html(Time_Section.start);
	});
	
	$("#StartTimeSelector_TestPlay").click(function(){
		$(Audio).unbind('timeupdate.setend');
		var play_start = Time_Section.start
		var play_len = parseFloat($("#StartTimeSelector_TestPlay_End").get(0).value);
		
		if ( Audio.duration - play_start > play_len){
			var play_end = play_start + play_len;
		}
		else{
			var play_end = Audio.duration - 0.1;
			
		}
		
		Audio.currentTime = play_start;
		$(Audio).bind('timeupdate.setend',function(){
			if (Audio.currentTime > play_end){
				Audio.pause();
			}
		});
		Audio.play()
	});
	
	//////////////////// End Time ////////////////////
	
	$("#EndTimeSelector_Select").click(function(){
		Time_Section.end = Audio.currentTime;
		$("#EndTimeSelector_EndTime").html(Time_Section.end);
	});
	
	$("#EndTimeSelector_EndTime_p").click(function(){
		var add_n = $(this).find("#EndTimeSelector_EndTime_p_n").get(0).value;
		Time_Section.end +=parseFloat(add_n);
		$("#EndTimeSelector_EndTime").html(Time_Section.end);
	});
	
	$("#EndTimeSelector_EndTime_m").click(function(){
		var minus_n = $(this).find("#EndTimeSelector_EndTime_m_n").get(0).value;
		Time_Section.end -=parseFloat(minus_n);
		$("#EndTimeSelector_EndTime").html(Time_Section.end);
	});
	
	
	$("#EndTimeSelector_TestPlay").click(function(){
		$(Audio).unbind('timeupdate.setend');
		var play_end = Time_Section.end
		var play_len = parseFloat($("#EndTimeSelector_TestPlay_End").get(0).value);
		
		if ( play_end  - play_len < 0 ){
			var play_start = 0;
		}
		else{
			var play_start = play_end  - play_len;
			
		}
		
		Audio.currentTime = play_start;
		$(Audio).bind('timeupdate.setend',function(){
			if (Audio.currentTime > play_end){
				Audio.pause();
			}
		});
		Audio.play()
	});
	
	//////////////////// End Player ////////////////////
	$("#AudioPlayer_SectionPlayer_play").click(function(){
		$(Audio).unbind('timeupdate.setend');
		
		var play_start = Time_Section.start;
		var play_end = Time_Section.end;
		$("#AudioPlayer_SectionPlayer_start").html(play_start);
		$("#AudioPlayer_SectionPlayer_end").html(play_end);
		
		
		Audio.currentTime = play_start;
		$(Audio).bind('timeupdate.setend',function(){
			if (Audio.currentTime > play_end){
				Audio.pause();
			}
		});
		Audio.play()
	});
	
	$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
			}
		});
	
	
	////////////////////////////////////////////////////////////////////////////////////
	
	
});

</script>



<body>

<div class="demo">

<p>
	<label for="amount">Range:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div>

<hr>


<div id="AudioPlayer">
	<audio id="Audio" controls></audio>
	
	<div id="AudioPlayer_LCSelector">
		<input id="AudioPlayer_LCSelector_input">
		<div id="AudioPlayer_LCSelector_select">
			Select
		</div>
		<div id="AudioPlayer_LCSelector_selectURL">
			Select_URL
		</div>
	</div>
	
	<hr>
	
	<div id="AudioPlayer_SectionSelector">
		<div id="StartTimeSelector">
			<div id="StartTimeSelector_StartTime">
				Start Time
			</div>
			<div id="StartTimeSelector_Select">
				Start Time Select
			</div>
			<div id="StartTimeSelector_StartTime_p">
				Start Time + <input id="StartTimeSelector_StartTime_p_n">
			</div>
			<div id="StartTimeSelector_StartTime_m">
				Start Time - <input id="StartTimeSelector_StartTime_m_n">
			</div>
			<div id="StartTimeSelector_TestPlay">
				Start Time Play: 0 ~ + <input id="StartTimeSelector_TestPlay_End">
			</div>
		</div>
		
		<hr>
		
		<div id="EndTimeSelector">
			<div id="EndTimeSelector_EndTime">
				End Time
			</div>
			<div id="EndTimeSelector_Select">
				End Time Select
			</div>
			<div id="EndTimeSelector_EndTime_p">
				End Time + <input id="EndTimeSelector_EndTime_p_n">
			</div>
			<div id="EndTimeSelector_EndTime_m">
				End Time - <input id="EndTimeSelector_EndTime_m_n">
			</div>
			<div id="EndTimeSelector_TestPlay">
				End Time Play: - <input id="EndTimeSelector_TestPlay_End"> ~ 0
			</div>
		</div>
		
		<hr>
		
		<div id="AudioPlayer_SectionPlayer">
			Session Start : <div id="AudioPlayer_SectionPlayer_start"></div>
			Session End : <div id="AudioPlayer_SectionPlayer_end"></div>
			<div id="AudioPlayer_SectionPlayer_play">Play</div>
		</div>

	</div>
	
	<hr>
	
	<div id="AudioPlayer_time">
	Time
	</div>
	<div id="AudioPlayer_play">
	Play
	</div>
	<div id="AudioPlayer_pause">
	Pause
	</div>
	
</div>





</body>
  
 
  
</html>